<template>
    <div class="subject">
        <Tabs type="card" :animated="false" v-model:value="currentTab" @on-tab-remove="removeTmpTab">
            <TabPane icon="ios-list-box-outline" label="课程列表" name="courseList">
                <SubjectList @course-list="courseListTemplate"></SubjectList>
            </TabPane>
            <TabPane icon="ios-add-circle-outline" label="新增课程" name="courseAdd">
                <SubjectAdd @course-add="courseAddTemplate"></SubjectAdd>
            </TabPane>

            <TabPane icon="ios-add-circle-outline" label="刷新前台" name="refresh">
                <Button type="primary" @click="refresh">刷新</Button>
            </TabPane>

            <!--临时表单-->
            <TabPane v-for="(obj,i) in tmpTab"
                     :key="obj.subjectId"
                     icon="ios-paper-outline"
                     :label="obj.subName"
                     :name="obj.subjectId"
                     closable>

                <Chapter :subjectId="obj.subjectId"></Chapter>
            </TabPane>
        </Tabs>
    </div>
</template>

<script>
    import SubjectList from "@/components/course/SubjectList"
    import SubjectAdd from "@/components/course/SubjectAdd"
    import Chapter from "@/components/course/Chapter"

    export default {
        name: "",
        components: {
            SubjectList, SubjectAdd, Chapter
        },
        data() {
            return {
                //当前tab
                currentTab: "",
                //临时tab
                tmpTab: [],
                subjectId:""
            }
        },
        methods: {
            //刷新前台
            refresh: function () {
                this.axios.get(`/course/subject/refresh`)
                    .then((data) => {
                        if (data.code == 200) {
                            this.$Message.success({
                                background: true,
                                closable: true,
                                duration: 2,
                                content: '刷新成功'
                            });
                        }
                    })
            },
            //课程新增成功
            courseAddTemplate: function (data) {
                if (data == true) {
                    this.currentTab = "courseList"
                }
            },
            //课程列表组件
            courseListTemplate: function (data) {
                //将传来的内容添加到列表上
                let subjectInfo = data.subjectInfo;
                if (this.tmpTab.length == 0) {
                    this.tmpTab.push(subjectInfo)
                } else {
                    for (let i = 0; i < this.tmpTab.length; i++) {
                        if (subjectInfo.subjectId == this.tmpTab[i].subjectId) {
                            this.currentTab = subjectInfo.subjectId
                            return
                        }
                    }
                    this.tmpTab.push(subjectInfo)
                }
                /*this.$router.push({
                    name: "Subject",
                    query: {
                        sid: subjectInfo.subjectId
                    }
                })*/
                //跳转当前tab
                this.currentTab = subjectInfo.subjectId
            },
            //移除临时tab
            removeTmpTab: function (name) {
                let tmpArray = this.tmpTab;
                for (let i = 0; i < tmpArray.length; i++) {
                    if (name == tmpArray[i].subjectId) {
                        tmpArray.delete(i)
                        this.tmpTab = tmpArray
                    }
                }
            }
        },
        watch: {
            currentTab(name) {
                if (name == "courseList") {
                    //选中列表触发查询
                    this.Bus.$emit("course-list-select", {
                        select: true
                    })
                } else {
                    //选中其他标签触发
                    this.Bus.$emit("course-list-select", {
                        select: false
                    })
                }

                let query = this.$route.query;
                if (query.sid != null) {
                    this.$router.push({
                        name: "Subject",
                        query: {
                            sid: name
                        }
                    })
                }
            }
        },
        mounted() {
            /*let query = this.$route.query;
            if (query.sid != null && query.sid != "courseList" && query.sid != "courseAdd") {
                this.axios.get(`/course/subject/subject/${query.sid}`)
                    .then((data) => {
                        if (data.code == 200 && data.data != null) {
                            this.tmpTab.push(data.data)
                            //跳转当前tab
                            this.currentTab = data.data.subjectId
                        }
                    })
            }*/
        }
    }
</script>

<style scoped>

</style>